import React, { Component } from 'react'
import styles from './Detailed.module.scss'
import { NavBar, Icon, Toast } from 'antd-mobile';
import { withRouter } from 'react-router-dom'
import axios from '../../axios/axios'
class Detailed extends Component {
  constructor(props) {
    super(props)
    this.id = props.match.params.id
    this.state = {
      bookinfo: [],
      loading:true
    }
  }
  async componentDidMount() {
    await axios.get('books/' + this.id + '/detail').then((res) => {
      if (!res.data) {
        return
      }
      this.setState({
        bookinfo: res.data,
        loading:false
      })
    })
  }
  componentWillUnmount() {
    this.setState = () => false;
  }
  handleAdd = () => {
    let bookinfo_str = localStorage.getItem("bookinfoList");
    if(bookinfo_str){
      let index = bookinfo_str.indexOf(this.id)
    if(index === -1){
      let bookinfoList = JSON.parse(bookinfo_str)  
      let newbookinfoList = bookinfoList.length?[...bookinfoList,this.state.bookinfo]:[bookinfoList,this.state.bookinfo]
      localStorage.setItem('bookinfoList',JSON.stringify(newbookinfoList))
      Toast.info("成功加入书架", 1);
    }else{
      Toast.info("已在对象中", 1);
    }
    }else{
      localStorage.setItem('bookinfoList',JSON.stringify(this.state.bookinfo))
      Toast.info("成功加入书架", 1);
    }
  }
  render() {
    let book = this.state.bookinfo
    if (book) {
      return (
        <div className={styles.detailed}>
          <div className={this.state.loading?'background':'hidder'}><Icon type={'loading'}/>加载中...</div>
          <NavBar
            mode="light"
            icon={<Icon type="left" style={{ color: '#333', fontSize: '24px' }} />}
            onLeftClick={() => this.props.history.go(-1)}
            rightContent={[
              <Icon onClick={() => this.props.history.push('/seek')} key="0" type="search" style={{ marginRight: '6px', color: '#333' }} />
            ]}
          >作品详情</NavBar>
          <div className={styles.bookinfo}>
            <div className={styles.left}>
              <img src={book.icon} alt="" />
            </div>
            <div className={styles.right}>
              <h3 className={styles.item_name}> {book.name} </h3>
              <p className={styles.item_row}> {book.authorName} | {book.sortName} | {book.status} </p>
              <p className={styles.item_row}> {Math.floor((book.words) / 10000)}万字 | {book.discountPrice} </p>
              <p className={styles.item_row}> 粉丝数 : {book.followCount > 10000 ? Math.floor((book.followCount) / 10000) : book.followCount} {book.followCount > 10000 ? '万字' : ''}</p>
              <p className={styles.item_row}> 点击数 : {book.visitCount > 10000 ? Math.floor((book.visitCount) / 10000) : book.visitCount} {book.visitCount > 10000 ? '万字' : ''}</p>
            </div>
          </div>
          <div className={styles.bookread}>
            <div className={styles.item_left} onClick={this.handleAdd}>加入书架</div>
            <div className={styles.item_right}>立即阅读</div>
          </div>
          <div className={styles.introduce}>
            {book.introduce}
          </div>
          <div className={styles.chapter}>
            <div>目录</div>
            {book.lastChapterList && book.lastChapterList.map((v) => {
              return <p key={v.id}>
                <span>  连载至  {v.name}</span>
                <span> 更新于 {v.chapterShowTime} </span> </p>
            })}


          </div>
          <div className={styles.shuping}>
            <div className={styles.title}>
              书评区
            </div>
            <div className={styles.center}>
              {book.reviewList && book.reviewList.map((v) => {
                return <div key={v.contentId} className={styles.item}>
                  <div className={styles.left}>
                    <img src={v.userIcon} alt="" />
                  </div>
                  <div className={styles.right}>
                    <div className={styles.name}> {v.userName} </div>
                    <div className={styles.comm}> {v.content} </div>
                    <p>
                      <span> {v.reviewShowTime} </span>
                      <span>回复:{v.score} </span>
                    </p>

                  </div>
                </div>
              })}
            </div>
            <div className={styles.bottom} onClick={() => {
              this.props.history.push('/comment/' + this.id)
            }}>
              更多书评({book.reviewListCount})条
            </div>
          </div>
        </div>
      )
    }
  }
}
export default withRouter(Detailed);
